<template>
  <button @click="sum++">增加数值{{ sum }}</button>
  <button @click="watchEffectTest">{{ we }} watchEffect 测试监听次数{{ sum }}</button>
</template>
<script>
import { watchEffect } from 'vue'
export default {

  data() {
    return {
      sum: 1,
      we: '关了',
    }
  },
  /* 定义函数 */
  methods: {
    watchEffectTest() {
      watchEffect((a) => {  
        console.log('watchEffectTest', a)
        alert('监听到了其他的属性的变更事件(watch)')
        console.log('watchEffectTest', this.sum)
      });
      this.we = '开了'
    },
  },
  watch: {
    // New: 新值 | Old: 老值
    sum(New, Old) {
      console.log(`新值:${New} ——— 老值:${Old}`)
    },
  },
}
</script>
